<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时图表展示</title>
    <script src="http://localhost:8080/vote/js/jquery-3.3.1.js"></script>
    <script src="http://localhost:8080/vote/js/echarts.min.js"></script>
    <link rel="stylesheet" href="http://localhost:8080/vote/layui/css/layui.css">
    <script src="http://localhost:8080/vote/layui/layui.js"></script>
</head>
<body>
  <div id="main" style="width: 600px;height:600px;margin-left: auto;margin-right: auto;margin-top: 40px"></div>

  <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      layui.use(['layer'],function () {
         var layer = layui.layer;

          var myChart = echarts.init(document.getElementById('main'));
          var b=50;
          // 指定图表的配置项和数据
          var option = {

          };

          myChart.setOption({        //加载数据图表
              title: {
                  text: '观众投票'
              },
              tooltip: {

              },
              legend: {
                  data:['票数']
              },
              xAxis: {
                  data: ['周杰伦','郑绪洪']
              },
              yAxis: {
                  min:0,
                  max:200
              },
              series: [{
                  name: '票数',
                  type: 'bar',
                  data: ['100','150'],
                  itemStyle: { normal: { label: { show: true, //开启显示
                      position: 'top', //在上方显示
                      textStyle: { color: 'black', fontSize: 25 }
                  }}},

              }]
          });


          // 使用刚指定的配置项和数据显示图表。
           var singernames=[];//存放姓名
          var singernumbers=[];//存放票数
          setInterval(function () {
              $.ajax({
                  url:"../score/user",
                  type:"post",
                  data:{},
                  dataType:"json",
                  success:function (res) {
                	  singernames.splice(0,singernames.length); 
                	  singernumbers.splice(0,singernumbers.length);
                	  
                    var t = eval(res);
                    for(var i=0;i<t.length;i++){
                        singernames.push(t[i].singername);
                        
                    }
                    for(var i=0;i<t.length;i++){
                        
                        singernumbers.push(t[i].num);
                    }
                   
                      myChart.setOption({        //加载数据图表
                          xAxis: {
                              data: singernames
                          },
                          series: [{
                              // 根据名字对应到相应的系列

                              data: singernumbers
                          }]
                      });
                  },
                  error:function () {
                    layer.msg("error");
                  }
              })
          },500)
      })

  </script>
</body>
</html>